<style>
  .el-input__inner{
    height: 30px !important;
    line-height: 30px !important;
  }
  .el-icon-date,.el-input__icon{
    line-height: 30px !important;
  }
</style>
<template>
  <div class="payment">
    <div class="top">
      <conHeader></conHeader>
    </div>
    <div class="content">
      <div class="search">
        <div class="search_con">
          <div class="sc_title">提交时间</div>
          <div class="sc_con">
            <div class="time">
              <el-date-picker
                v-model="start_time"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="search_con">
          <div class="sc_title">状态</div>
          <div class="sc_con">
            <div class="radios">
              <div class="radio">
                <el-radio v-model="status" label="1" border size="mini">待办</el-radio>
              </div>
              <div class="radio">
                <el-radio v-model="status" label="2" border size="mini">已办</el-radio>
              </div>
              <div class="radio" style="margin-left: 10px">
                <el-button type="success" style="padding-top: 0;line-height: 30px" @click="searchList">查询</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab">
        <div class="tab_top">
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="house_no"
              label="房间"
              width="100"
              align="center">
            </el-table-column>
            <el-table-column
              label="类型"
              width="80"
              align="center">
              <template slot-scope="scope">
                <!--0:其他，1：换房，2：续房，3：退房，4：加床，5：清扫-->
                <span v-if="scope.row.call_type == 0">其他</span>
                <span v-if="scope.row.call_type == 1">换房</span>
                <span v-if="scope.row.call_type == 2">续房</span>
                <span v-if="scope.row.call_type == 3">退房</span>
                <span v-if="scope.row.call_type == 4">加床</span>
                <span v-if="scope.row.call_type == 5">清扫</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="created_at"
              label="提交时间"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="说明"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              label="状态"
              width="80"
              align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">待办</span>
                <span v-if="scope.row.status == 1">已办</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="user_name"
              label="创建人"
              width="80"
              align="center">
            </el-table-column>
            <el-table-column
              prop="hotel_user_name"
              label="办理人"
              width="80"
              align="center">
            </el-table-column>
            <el-table-column
              prop="call_time"
              label="办理时间"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              label=""
              align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">
                  <el-button type="success" size="mini" @click="toDo(scope.row.id)">办理</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="tab_bottom">
          <el-pagination
            :page-size="pageSize"
            :pager-count="11"
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import conHeader from '../assembly/conHeader'
  export default {
    name: "backlog",
    components: {
      conHeader,
    },
    data() {
      return {
        start_time:'', //筛选开始时间
        status:'1', //状态
        page:1, //分页页码
        pageSize:10, //每页显示条数
        tableData: [],
        total:0
      }
    },
    created() {
      let self = this
      self.searchList()
    },
    mounted() {
    },
    methods:{
      ...mapActions([
        'upstate'
      ]),
      //查询列表
      searchList(){
        let self = this
        let chooseStatus
        if (self.status == 1){
          chooseStatus = 0
        }else {
          chooseStatus = 1
        }
        self.$http.post(self.conURL + 'hotel/user/usercalllist',{
          start_time:self.start_time,
          status:chooseStatus,
          page:self.page,
          pageSize:self.pageSize
        }).then(res => {
          if (res.data.code == 0){
            self.tableData = res.data.data.data
            self.total = res.data.data.total
          }else {
            self.createMess(res.data.msg)
          }
        })
      },
      //办理
      toDo(id){
        let self = this
        this.$confirm('是否已办理当前呼叫?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http.post(self.conURL + 'hotel/user/changestatus',{id:id}).then(res => {
            if (res.data.code == 0){
              this.$message({
                type: 'success',
                message: '办理成功!'
              });
              localStorage.setItem('newCallNum',res.data.data.countCall)
              sessionStorage.setItem('loopStop',false)
              self.upstate({key:'newCallNum',val:localStorage.getItem('newCallNum')})
              setTimeout(() => {
                self.searchList()
              },100)
            }else {
              self.createMess(res.data.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      /*-------------------------公共房费-----------------------------*/
      //接口请求失败，提示信息
      createMess(msg){
        let self = this
        this.$notify.error({
          title: '提示',
          message: msg
        });
        self.upstate({key:'public_bc',val:false})
      },
    }
  }
</script>

<style lang="less" scoped>
  page{
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .payment{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    .content{
      width: 100%;
      height: 100%;
      padding-top: 48px;
      .search{
        display: flex;
        flex-direction: column;
        padding: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        .search_con{
          display: flex;
          flex-direction: row;
          margin-top: 10px;
          .sc_title{
            width: 80px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            text-align: right;
            margin-right: 10px;
          }
          .sc_con{
            height: 30px;
            line-height: 30px;
            display: flex;
            flex-direction: row;
            .time{
              height: 30px;
              line-height: 30px;
              margin-left: 5px;
            }
            .time:first-child{
              margin-left: 0;
            }
            .time_title{
              font-size: 16px;
              line-height: 30px;
              margin-left: 5px;
            }
            .radios{
              display: flex;
              flex-direction: row;
              height: 30px;
              .radio{
                height: 30px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-left: 5px;
              }
              .radio:first-child{
                margin-left: 0;
              }
            }
          }
        }
        .search_con:first-child{
          margin-top: 0;
        }
      }
      .tab{
        padding: 15px;
        display: flex;
        flex-direction: column;
        .tab_bottom{
          margin-top: 10px;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
        }
      }
    }
  }
</style>
